import { dmServiceDetail } from "@/api/sharing/dmService";
import CodeEditor from "@/components/codemirror/CodeEditor";
import { CircleLoading } from "@/components/loading";
import { useParams } from "@/router/hooks";
import { parseTime } from "@/utils";
import { useQuery } from "@tanstack/react-query";
import { Breadcrumb, Descriptions, Divider, Flex, Input, Table } from "antd";
import { Link } from "react-router-dom";
import styled from "styled-components";

const DmServiceDetail = () => {
  const { id } = useParams();

  const { data: fullData, isFetching, refetch } = useQuery({
    queryKey: ['page-DmServiceEdit-dmServiceDetail', id],
    queryFn: () => {
      return dmServiceDetail({ id: id }).then((res) => {
        return res?.result ? {
          ...res?.result.baseData,
          itemList: res?.result.itemList,
          queryParamList: res?.result.queryParamList,
        } : { itemList: [], queryParamList: [] }
      })
    },
    enabled: !!id
  })

  if (isFetching) {
    return <CircleLoading target={'parent'}></CircleLoading>
  }

  return (<StyleWrap className="dm-service-detail">
    <div className="page-breadcrumb">
      <Breadcrumb
        items={[
          {
            title: <Link to="/dmService">达梦服务</Link>,
          },
          {
            title: '服务详情',
          }
        ]}
      />
    </div>
    <Descriptions
      column={3}
    >
      <Descriptions.Item label="应用名称">{fullData.serviceName}</Descriptions.Item>
      <Descriptions.Item label="信息项数">{fullData.itemList.length}</Descriptions.Item>
      <Descriptions.Item label="查询参数">{fullData.queryParamList.length}</Descriptions.Item>
      <Descriptions.Item label="创建人">{fullData.createBy}</Descriptions.Item>
      {/* <Descriptions.Item label="英文简称">{fullData.engSimpleName || '无'}</Descriptions.Item>
      <Descriptions.Item label="应用编码">{fullData.configDetail.code}</Descriptions.Item>
      <Descriptions.Item label="APPID">{fullData.configDetail.appId}</Descriptions.Item>
      <Descriptions.Item label="APPSecretKey">{fullData.configDetail.appSecretKey}</Descriptions.Item>
      <Descriptions.Item label="应用地址">{fullData.configDetail.accessUrl}</Descriptions.Item>
      <Descriptions.Item label="回调地址">{fullData.configDetail.callbackUrl}</Descriptions.Item> */}
      <Descriptions.Item label="创建时间">{parseTime(fullData.createTime)}</Descriptions.Item>
      <Descriptions.Item label="更新时间">{parseTime(fullData.updateTime)}</Descriptions.Item>
      <Descriptions.Item span={2} label="应用描述">{fullData.describe || '无'}</Descriptions.Item>
    </Descriptions>
    <Divider />
    <div className="section-title">信息项</div>
    <div className="section-content">
      <Table dataSource={fullData.itemList} pagination={false} columns={[
        {
          title: '序号',
          dataIndex: 'index',
          width: 50,
          render(text, _, index) {
            return index + 1
          }
        },
        {
          title: '字段名称',
          dataIndex: 'paramName',

        },
        {
          title: '字段类型',
          dataIndex: 'paramType',
        },
        {
          title: '字段长度',
          dataIndex: 'paramLength',
        },
        {
          title: '字段描述',
          dataIndex: 'paramRemark',
        },
      ]}></Table>
    </div>
    <Divider />
    <div className="section-title">查询参数</div>
    <div className="section-content">
      <Table dataSource={fullData.queryParamList} pagination={false} columns={[
        {
          title: '序号',
          dataIndex: 'index',
          width: 50,
          render(text, _, index) {
            return index + 1
          }
        },
        {
          title: '参数名称',
          dataIndex: 'paramName',
        },
        {
          title: '参数类型',
          dataIndex: 'paramType',
          valueType: 'select',
        },
        {
          title: '参数描述',
          dataIndex: 'paramRemark',
        },
      ]}></Table>
    </div>
    <Divider />
    <div className="section-title">请求示例</div>
    <Flex>
      <p style={{ flexShrink: 0, marginRight: 10 }}>请求地址</p>
      <Input value={fullData.accessUrl} readOnly />
    </Flex>
    <Flex style={{ marginTop: 10 }}>
      <div style={{ flex: 1 }}>
        <p>参数示例：</p>
        <CodeEditor readOnly={true} lang="json" value={JSON.stringify({ "resourceSign": fullData.id, "requestParams": [{ "paramName": "参数名", "paramValue": "参数值" }] }, null, 2)} height="200px" />
      </div>
      <Divider type="vertical" style={{ height: 'unset' }} />
      <div style={{ flex: 1 }}>
        <p>响应示例：</p>
        <CodeEditor readOnly={true} lang="json" value={JSON.stringify({ "success": true, "message": "操作成功！", "code": 200, "result": [], "timestamp": 1745931086622 }, null, 2)} height="200px" />
      </div>
    </Flex>
  </StyleWrap>);
}

const StyleWrap = styled.div`
  &.dm-service-detail{
    padding: 16px;
  }
  .section-title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
`

export default DmServiceDetail;   